<template>
  <div class="pie" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'PieCharts',
  data() {
    return {
      chart: null,
    };
  },
  props: {
    ringData: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
    legendTop: {
      type: String,
      default: '80',
    },
    legendLeft: {
      type: String,
      default: '20',
    },
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chart);
      var randNum = function (minnum, maxnum) {
        return Math.floor(minnum + Math.random() * (maxnum - minnum));
      };
      var datas = this.ringData;
      const totalValue = datas.reduce((sum, item) => sum + item.value, 0);
      const option = {
        // ...现有配置保持不变...
        tooltip: {
          trigger: 'item',
          formatter: function (param) {
            if (param.seriesName && param.seriesName == 'number') {
              return (
                param.marker +
                param.data.name +
                '<br/>' +
                param.data.value +
                '人 (' +
                param.percent +
                '%)'
              );
            }
          },
        },
        legend: {
          orient: 'vertical',
          top: this.legendTop,
          left: this.legendLeft,
          itemWidth: 12,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          exclude: ['总计'],
        },
        color: ['#1e7aff', '#fac858', '#91cc75'],
        series: [
          {
            name: 'number',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '50%'],
            label: {
              show: true,
              formatter: '{b}\n {value|{d}}',
              rich: {
                value: {
                  color: '#fff',
                },
              },
              position: 'outside',
              color: '#fff',
              fontSize: 14,
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
            },
            data: datas,
          },
          {
            type: 'pie',
            radius: ['0', '30%'],
            center: ['60%', '50%'],
            silent: true,
            labelLine: {
              show: false,
            },
            label: {
              show: true,
              position: 'center',
              formatter: (params) => {
                return '{total|' + totalValue + '}\n{desc|' + this.title + '}';
              },
              rich: {
                total: {
                  color: '#fff',
                  fontSize: 24,
                  fontWeight: 'bold',
                  lineHeight: 30,
                },
                desc: {
                  color: '#aaa',
                  fontSize: 14,
                  lineHeight: 20,
                },
              },
            },
            data: [
              {
                value: 100,
                name: '',
                itemStyle: {
                  color: 'rgba(0,0,0,0)', // 透明
                },
              },
            ],
          },
          {
            type: 'pie',
            radius: ['80%', '80%'],
            center: ['60%', '50%'],
            itemStyle: {
              borderColor: '#1574AC',
              borderWidth: 1,
              borderType: 'dashed',
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: datas,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.pie {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
